<template>
  <!-- 导航栏 -->
  <div class="app">
    <nav class="Topnav_item">
      <div class="Topnav_img_box" v-show="!fullWidth">
        <router-link
          to="/"
          style="display: flex; align-items: center; padding: 0 20px"
        >
          <div @click="make_menu()" style="margin-right: 1%">
            <img src="./assets/three.png" alt="" />
          </div>
          <div class="navLogo">
            <img src="./assets/images/index/LOGO.png" alt="" />
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              position: absolute;
              right: 2%;
            "
          >
            <div class="phone" style="margin-right: 10px">
              <img
                src="./assets/images/index/phone.png"
                style="width: 31px; height: 31px"
                alt=""
              />
              400-0311-272
            </div>
            <div class="indexRight">
              <router-link :to="path"
                ><img src="./assets/images/index/denglu.png" alt=""
              /></router-link>
              <router-link :to="path"
                ><img src="./assets/images/index/zhuce.png" alt=""
              /></router-link>
            </div>
          </div>
        </router-link>
      </div>
      <!--		        pc端导航-->
      <div id="goTop" class="flex_box mymakeinfo contentNav" v-show="fullWidth">
        <div class="navLogo">
          <img src="./assets/images/index/LOGO.png" alt="" />
        </div>
        <div class="phone">
          <img
            src="./assets/images/index/phone.png"
            style="width: 31px; height: 31px"
            alt=""
          />
          400-0311-272
        </div>
        <ul>
          <li v-for="(item,index) in navData" :key="index" >
            <RouterLink active-class="active" :to="item.path">{{ item.name }} </RouterLink>
          </li>

        </ul>
        <div class="indexRight">
          <div style="display: flex; justify-content: center">
            <el-tooltip
              class="item"
              effect="light"
              content="登录"
              placement="bottom-end"
            >
              <a :href="url"
                ><img src="./assets/images/index/denglu.png" alt=""
              /></a>
            </el-tooltip>
          </div>
          <div>
            <el-tooltip
              class="item"
              effect="light"
              content="注册"
              placement="bottom-start"
            >
              <a :href="path"
                ><img src="./assets/images/index/zhuce.png" alt=""
              /></a>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!--		      移动端导航-->
      <transition name="toggle-cart">
        <div class="H5-menu-item" v-show="!fullWidth && !dismenu">
          <ul>
            <li v-for="(item,index) in navData" :key="index" >
              <RouterLink  :to="item.path">{{ item.name }} </RouterLink>
            </li>
          </ul>
        </div>
      </transition>
      <div style="height: 0.1rem"></div>
    </nav>

    <router-view />

    <footer>
      <ul>
        <template v-for="(item, index) in navData">
          <li v-if="$route.path !== item.path" :key="index" class="lineLast">
            <RouterLink :to="item.path">{{ item.name }} &emsp;</RouterLink><span>|</span>
          </li>
        </template>
      </ul>
      <div class="copyright">
        <div>Copyright</div>
        <div>2018-2022 速裁通 版权所有</div>
        <div>备案号：冀ICP备19035429号-1</div>
      </div>
      <div class="footerImg">
        <a href="#goTop">
          <img src="./assets/images/index/zhiding.png" alt="" />
        </a>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url:'http://47.100.78.124:9982',//http://47.100.78.124:9982
      path:'http://47.100.78.124:9982?testParam=123',
      screenWidth: null,
      activeClass: "",
      pagetype: "index",
      fullWidth: true,
      dismenu: true,
      // 导航栏数据
      navData: [
        {
          path: "/index",
          name: "首页",
        },
        {
          path: "/product",
          name: "产品服务",
        },
        {
          path: "/safety",
          name: "安全合规",
        },
        {
          path: "/solve",
          name: "解决方案",
        },
        {
          path: "/operation",
          name: "运营中心",
        },
        {
          path: "/about",
          name: "关于我们",
        },
      ],
    };
  },
  mounted() {
    let routeStr = this.$route.path;

    console.dir("路由地址：" + routeStr);

    this.screenWidth = document.body.clientWidth;
    (window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    }),
      (window.onresize = () => {
        //监听屏幕变化
        this.page_width();
      });
    this.page_width();
  },
  methods: {
    make_menu() {
      //点击导航图标
      this.dismenu = !this.dismenu;
    },
    page_width() {
      //获取屏幕宽度
      let screenWidth = window.screen.width;
      console.log(screenWidth);
      if (screenWidth < 750) {
        this.fullWidth = false;
      } else {
        this.fullWidth = true;
      }
    },
  },
  // watch: {
  //   screenWidth: {
  //     handler: function (val, oldVal) {
  //       console.dir("当前宽度："+val)
  //     },
  //   }
  // }
};
</script>

<style lang="less">
  ul .lineLast:nth-of-type(5){
    span{
      display: none;
    }

  }
.active {
  color: #1dd2af;
  border-bottom: #1dd2af 4px solid;

}

a {
  text-decoration: none;
}

a .active {
  text-decoration: none;
}

.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 auto;
  font-size: 18px;
  transition: all 0.5s;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  a {
    text-decoration: none;
    padding-bottom: 10px;
    color: #5d6e80;
  }
}

.goTop {
  color: #5d6e80;
  height: 150px;
}

.phone {
  display: flex;
  align-items: center;
  font-size: 26px;

  img {
    margin-right: 20px;
  }
}

.contentNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%;
  height: 100px;

  .navLogo {
    img {
      width: 203px;
      height: 78px;
    }
  }

  ul {
    align-items: center;
    justify-content: center;
    margin-right: 78px;

    li {
      margin-right: 38px;
      font-size: 22px;
    }

    a:hover {
      color: #1dd2af;
    }
  }
}

.indexRight {
  width: 163px;
  height: 19px;
  display: flex;
  align-items: center;
  div:first-child {
    margin-right: 20px;
  }
  img {
    width: 20px;
    height: 20px;
  }
}

footer {
  width: 100%;
  background: #2c3e50;
  color: white;

  ul {
    align-items: center;
    justify-content: center;

    li {
      margin: 36px 18px 27px 18px;
      a {
        color: white;
      }
    }
  }

  .copyright {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    div {
      margin-right: 9px;
      color: #9dafc0;
      font-size: 15px;
    }
  }

  .footerImg {
    width: 100%;
    text-align: center;
    padding-top: 38px;

    img {
      text-align: center;
      width: 115px;
      height: 115px;
    }
  }
}

.spanLine {
  width: 76px;
  height: 3px;
  margin: -10px auto 20px auto;
  background-color: #1dd2af;
}

.w-132 {
  width: 80%;
}

.this_tnbd_div {
  background-color: rgba(0, 0, 0, 0.3);
}

.Topnav .Topnav_item {
  .H5_item {
    position: absolute;
    right: 14px;
    top: 24px;

    .H5-menu {
      font-size: 22px;
    }
  }
}

.H5-menu-item {
  width: 240px;
  position: absolute;
  top: 180px;
  z-index: 20190705;
  height: 400px;

  background: #1DD2AF;

  ul {
    display: flex;
    flex-direction: column;

    li {
      width: 100%;
      height: 62px;
      line-height: 62px;
      text-align: center;
      a{
        color: white;
      }
    }
  }
}

.toggle-cart-enter-active,
.toggle-cart-leave-active {
  transition: all 0.4s ease-out;
}

.toggle-cart-enter,
.toggle-cart-leave-active {
  transform: translateY(-100%);
}

@keyframes bottomMoveTop {
  0% {
    opacity: 0;
    transform: translate3d(0, 150px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.queue-bottom {
  animation: bottomMoveTop 0.6s cubic-bezier(0.5, 1, 0.89, 1);
  animation-fill-mode: forwards;
}
</style>
